<template>
    <el-form label-width="80px">
        <el-form-item label="用户名称">
            <el-input v-model="form.user_name" />
        </el-form-item>
        <el-form-item label="用户昵称">
            <el-input v-model="form.nick_name" />
        </el-form-item>
        <el-form-item label="邮箱地址">
            <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item>
            <el-button @click="modifyHandler" type="primary">立即修改</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
    import {
        userUpdate
    } from '@/api'
    import useStore from '@/store'
    import {
        ElMessage
    } from 'element-plus'
    const $store = useStore()
    import {
        computed,
        ref
    } from "vue"
    let form = ref(JSON.parse(JSON.stringify($store.userInfo)))
    let modifyHandler = async _ => {
        let r = await userUpdate(form.value)
        await $store.getUserInfo()
        ElMessage.success(r.msg)
    }
</script>